<template>
  <q-card class="show-mes full-height" style="box-shadow:none">
    <div class="mes-header q-pl-md">
      <div v-if="showMsgData && showMsgData.icon" class="flex">
        <img :src="`../../../../statics/img/home/${showMsgData.icon}.svg`" style="width: 40px;">
        <div class="q-ml-sm">{{ showMsgData.name }}</div>
      </div>
      <div v-else>暂无消息</div>
    </div>
    <q-virtual-scroll
      ref="virtualListRef"
      style="overflow-x: hidden"
      class="content scrollbar"
      :virtual-scroll-item-size="0"
      :items="testData"
      component="q-list"
      @virtual-scroll="onVirtualScroll"
    >
      <template v-slot="{ item, index }">
        <q-item :key="index">
          <q-item-section>
            <q-item-label>
              <div class="font-size-12 text-center q-mb-md msg-title">{{ item.createTime | toNewDate }}</div>
              <!-- <div class="message-name" :style=" { color : !item.read ? '#999' : '#5f77fd' }">
                 {{!item.read ? '未读' : ''}}
              </div> -->
              <q-chat-message
                :avatar="`../../../../statics/img/home/${showMsgData.icon}.svg`"
                :name="!item.read ? '未读' : ''"
                bg-color="white"
              >
                <div class="msg-1">
                  {{ item.businessName }}
                </div>
                <div class="msg-2">
                  {{ item.content }}
                </div>
              </q-chat-message>
            </q-item-label>
          </q-item-section>
        </q-item>
      </template>
    </q-virtual-scroll>
    <q-btn v-if="scrollNum > 5 && this.testData.length" round color="primary" icon="keyboard_arrow_up" class="top-btn" @click="toMesTop">
      <q-tooltip>{{scrollNum | toLtMore}}条未读</q-tooltip>
    </q-btn>
      <q-inner-loading :showing="isVisible">
          <q-spinner-gears size="50px" color="primary" />
      </q-inner-loading>
  </q-card>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import _ from 'lodash'
import MESLIST from 'src/boot/factory/mes-list.js'
const { getMsgList } = MESLIST
export default {
  name: 'ShowMes',
  data () {
    return {
      testData: [],
      showMsgData: {},
      virtualListIndex: 0,
      current: 1,
      pageSize: 10,
      size: 10,
      isScroll: true, // 判断一下新入
      isRead: true, // 区分是否要进行滚动查询调用接口
      total: 0 // 接口返回的条数和
    }
  },
  computed: {
    ...mapGetters({
      'msgData': 'mes/msgData',
      'pagination': 'mes/pagination',
      'msgAllList': 'mes/msgAllList',
      'scrollNum': 'mes/scrollNum',
      'isVisible': 'mes/isVisible',
      'newMsg': 'mes/newMsg'
    }),
    // 置顶到第一条未读消息
    topHeight () {
      return this.testData.length - (this.scrollNum + this.newMsg.length)
    },
    // 移动距离
    scrollSize () {
      let isBottom = this.virtualListIndex >= this.testData.filter(v => v.read).length - 1 && this.virtualListIndex <= this.testData.length + 1
      // 新消息进入. 在底部的时候;置底在最下面
      if ((this.newMsg.length > 0 && isBottom) || this.testData.length < 10) {
        return this.testData.length
      }
      // 初始化进来的时候默认到最底部
      // 向上滚动 默认为单次请求回来数据的长度
      return this.size
    }
  },
  watch: {
    msgData: {
      handler (newPro) {
        this.CLEAR_MSG()
        this.showMsgData = newPro
        this.current = 1
        this.size = 10
        this.pageSize = 10
        this.isRead = false
        this.SET_MESLIST({ list: [], type: 1 })
        if (!_.isEmpty(newPro)) {
          this.getMsgList(newPro, 1)
        }
      },
      deep: true
    },
    msgAllList: {
      handler (val) {
        this.testData = val
        if (!val) return
        // 5 是页面显示条数.
        if (this.testData.length > 5 && this.pageSize === 10) {
          this.$refs.virtualListRef.scrollTo((this.scrollSize))
        } else if (!this.isScroll) { // 置顶到未读消息的地方
          this.goTopMes()
        }
      },
      deep: true
    }
  },
  mounted () {
    this.$refs.virtualListRef.reset()
  },
  methods: {
    // 右侧查询分页.
    getMsgList (val, type = 1) {
      this.SET_VISIBLE(true)
      const params = {
        current: this.current,
        label: val.label,
        size: this.pageSize
      }
      if (_.isEmpty(val)) return
      getMsgList(params).then(res => {
        this.SET_VISIBLE(false)
        const ret = res.data.records.reverse()
        this.isRead = !(ret.length < 10)
        ret.map(v => {
          const item = v
          item.label = val.label
        })
        // 单条数据长度.
        this.size = ret.length
        // 返回总条数
        this.total = res.data.total
        this.SET_MESLIST({ list: ret, type })
      }).catch(err => {
        console.log(err)
        this.SET_VISIBLE(false)
      })
    },
    // 滚动操作
    onVirtualScroll ({ index }) {
      if (this.pageSize !== 10) {
        this.current = Math.floor(this.pageSize / 10)
      }
      this.pageSize = 10
      if (index < 0) return
      console.log(index)
      this.virtualListIndex = index
      // 还有数据未加载, 处于顶部; 未进行到未读消息操作.
      if (this.isRead && index === 0 && this.isScroll && this.testData.length > 9) {
        this.current += 1
        this.getMsgList(this.showMsgData, 2)
      }
    },
    // 定位到未读消息的按钮
    toMesTop () {
      this.isScroll = false
      // 如果现有消息长度大于未读消息条数,就直接跳转, 不用请求接口
      if (this.scrollNum <= this.testData.length) {
        this.goTopMes()
        return
      }
      // 未读消息条数过多, , 重新请求接口
      this.current = 1
      this.pageSize = Math.ceil(this.scrollNum / 10) * 10
      this.getMsgList(this.showMsgData, 3)
    },
    goTopMes () {
      const self = this
      setTimeout(function () {
        self.$refs.virtualListRef.scrollTo(self.topHeight)
        self.isScroll = true
        self.CLEAR_SCROLLNUM()
      })
    },
    ...mapMutations({
      'SET_MESLIST': 'mes/SET_MESLIST',
      'SET_VISIBLE': 'mes/SET_VISIBLE',
      'CLEAR_MSG': 'mes/CLEAR_MSG',
      'CLEAR_SCROLLNUM': 'mes/CLEAR_SCROLLNUM'
    })
  }
}
</script>
<style lang="scss" scoped>
.show-mes{
  .top-btn{
    position: fixed;
    right: 60px;
    bottom: 40px;
    opacity: 0.7;
    transition: .5s;
  }
  .mes-header{
    height: 48px;
    line-height: 48px;
    background: #F3F3F3;
    border-radius: 6px 6px 0px 0px;
    border-bottom: 1px solid  #eee;
  }
  .content{
    height: calc(100% - 48px);
    overflow: auto;
    .msg-title{
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    /deep/ .q-message-container{
      align-items: center;
      /deep/.q-message-name{
        color: #999999;
        margin-bottom :5px;
        font-size: 12px;
      }
    }
    /deep/ .q-message-avatar{
      width: 40px;
      height: 40px;
    }
    /deep/ .q-message-text {
      background: #FFFFFF;
      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
      border: 2px solid #eee !important;
      border-radius: 12px;
      padding:10px;
      width: 500px;
      &:before{
        content: none;
      }
    }
    /deep/.msg-1 {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      margin-bottom: 2px;
    }
    /deep/ .msg-2 {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 28px;
    }
    .message-name{
      margin-bottom: 5px;
      font-size: 12px;
      margin-left: 65px;
    }
  }
}
</style>
